<style scoped>
.box {
  width: 100%;
}
.top {
  width: 100%;
  height: 46px;
  position: fixed;
  top: 0;
  z-index: 1;
}
.center {
  margin-bottom: 58px;
}
.footer {
  width: 100%;
  height: 58px;
  position: fixed;
  bottom: 0;
}
</style>

<template>
  <div class="box">
    <div class="top" :style="backgroundColor">
      <SelfTop />
    </div>
    <div class="center">
      <MyMassage />
    </div>
    <div class="footer">
      <Maintabbar />
    </div>
  </div>
</template>


<script>
import SelfTop from "./SelfTop";
import MyMassage from "pages/profile/MyMassage";
import Maintabbar from "components/Maintabbar";
export default {
  name: "MySelf",
  data: function () {
    return {
      backgroundColor: " background-color:transparent",
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop >= 180) {
        this.backgroundColor = "background-color:#313d3d";
      } else if (scrollTop >= 70) {
        this.backgroundColor = "background-color:rgba(36, 38, 44,0.8)";
      } else {
        this.backgroundColor = "transparent";
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  components: {
    SelfTop,
    MyMassage,
    Maintabbar,
  },
};
</script>

